<!-- 请假详情 -->
<template>
  <el-dialog v-model="dialogFormVisible" :title="title" width="500" destroy-on-close draggable @closed="handlerClosed">
    <el-table :data="tableData" style="width: 100%" border header-cell-class-name="table-header-row" empty-text="没有数据">
      <el-table-column prop="leaveDate" label="请假时间" />
      <el-table-column prop="leaveCategory" label="类型">
        <template #default="scope">
          <TextTeg :id="scope.row.leaveCategory * 1" />
        </template>
      </el-table-column>
      <el-table-column prop="leaveStatus" label="状态">
        <template #default="scope">
          <LeaveStatusTag :status="scope.row.leaveStatus * 1" />
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import TextTeg from '../TableParts/TextTeg.vue'
import LeaveStatusTag from '../Leave/LeaveStatusTag.vue'

const dialogFormVisible = ref(false)
const title = ref('')
const tableData = ref<any[]>([])

/**
 * 当处理器关闭时调用的函数
 */
const handlerClosed = () => {
  tableData.value = []
  title.value = ''
}

const open = (row: any) => {
  dialogFormVisible.value = true
  title.value = `${row.nickName}的请假信息`
  tableData.value = row.leaveList
}

defineExpose({ open })
</script>
<style lang="scss" scoped>
.cells {
  display: flex;
  flex-wrap: wrap;

  .cell {
    margin: 5px;
  }
}
</style>
